<!DOCTYPE html>
<html>
<head>
    

    

    



    <meta charset="utf-8">
    
    
    
    <title>Web 前端代码规范 | Xiaoming&#39;s Blog | 一入前端深似海，从此妹子是路人。</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <meta name="theme-color" content="#3F51B5">
    
    
    <meta name="keywords" content="js,html,css">
    <meta name="description" content="Web 前端代码规范最后更新时间：2017-06-25 原始文章链接：https://github.com/bxm0927/web-code-standards 此项目用于记录规范的、高可维护性的前端代码，这是通过分析 Github 众多前端代码库，总结出来的前端代码书写规范。">
<meta name="keywords" content="js,html,css">
<meta property="og:type" content="article">
<meta property="og:title" content="Web 前端代码规范">
<meta property="og:url" content="http://www.lovebxm.com/2017/06/25/web-code-standards/index.html">
<meta property="og:site_name" content="Xiaoming&#39;s Blog">
<meta property="og:description" content="Web 前端代码规范最后更新时间：2017-06-25 原始文章链接：https://github.com/bxm0927/web-code-standards 此项目用于记录规范的、高可维护性的前端代码，这是通过分析 Github 众多前端代码库，总结出来的前端代码书写规范。">
<meta property="og:updated_time" content="2017-06-25T08:24:14.552Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Web 前端代码规范">
<meta name="twitter:description" content="Web 前端代码规范最后更新时间：2017-06-25 原始文章链接：https://github.com/bxm0927/web-code-standards 此项目用于记录规范的、高可维护性的前端代码，这是通过分析 Github 众多前端代码库，总结出来的前端代码书写规范。">
    
        <link rel="alternate" type="application/atom+xml" title="Xiaoming&#39;s Blog" href="/atom.xml">
    
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" href="//unpkg.com/hexo-theme-material-indigo@latest/css/style.css">
    <script>window.lazyScripts=[]</script>
</head>

<body>
    <div id="loading" class="active"></div>

    <aside id="menu"  >
  <div class="inner flex-row-vertical">
    <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menu-off">
        <i class="icon icon-lg icon-close"></i>
    </a>
    <div class="brand-wrap" style="background-image:url(/img/brand.jpg)">
      <div class="brand">
        <a href="/" class="avatar waves-effect waves-circle waves-light">
          <img src="/img/avatar.jpg">
        </a>
        <hgroup class="introduce">
          <h5 class="nickname">白小明</h5>
          <a href="mailto:80583600@qq.com" title="80583600@qq.com" class="mail">80583600@qq.com</a>
        </hgroup>
      </div>
    </div>
    <div class="scroll-wrap flex-col">
      <ul class="nav">
        
            <li class="waves-block waves-effect">
              <a href="/"  >
                <i class="icon icon-lg icon-home"></i>
                主页
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/tags"  >
                <i class="icon icon-lg icon-tags"></i>
                标签
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/hand-peace-o"  >
                <i class="icon icon-lg icon-hand-peace-o"></i>
                作品
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="https://github.com/bxm0927" target="_blank" >
                <i class="icon icon-lg icon-github"></i>
                Github
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/user"  >
                <i class="icon icon-lg icon-user"></i>
                关于我
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/404.html"  >
                <i class="icon icon-lg icon-link"></i>
                404 测试
              </a>
            </li>
        
      </ul>
    </div>
  </div>
</aside>

    <main id="main">
        <header class="top-header" id="header">
    <div class="flex-row">
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light on" id="menu-toggle">
          <i class="icon icon-lg icon-navicon"></i>
        </a>
        <div class="flex-col header-title ellipsis">Web 前端代码规范</div>
        
        <div class="search-wrap" id="search-wrap">
            <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="back">
                <i class="icon icon-lg icon-chevron-left"></i>
            </a>
            <input type="text" id="key" class="search-input" autocomplete="off" placeholder="输入感兴趣的关键字">
            <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="search">
                <i class="icon icon-lg icon-search"></i>
            </a>
        </div>
        
        
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menuShare">
            <i class="icon icon-lg icon-share-alt"></i>
        </a>
        
    </div>
</header>
<header class="content-header post-header">

    <div class="container fade-scale">
        <h1 class="title">Web 前端代码规范</h1>
        <h5 class="subtitle">
            
                <time datetime="2017-06-25T08:23:05.197Z" itemprop="datePublished" class="page-time">
  2017-06-25
</time>


            
        </h5>
    </div>

    


</header>


<div class="container body-wrap">
    
    <aside class="post-widget">
        <nav class="post-toc-wrap" id="post-toc">
            <h4>TOC</h4>
            <ol class="post-toc"><li class="post-toc-item post-toc-level-1"><a class="post-toc-link" href="#Web-前端代码规范"><span class="post-toc-number">1.</span> <span class="post-toc-text">Web 前端代码规范</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#目录"><span class="post-toc-number">1.1.</span> <span class="post-toc-text">目录</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#License"><span class="post-toc-number">1.2.</span> <span class="post-toc-text">License</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#Thanks"><span class="post-toc-number">1.3.</span> <span class="post-toc-text">Thanks</span></a></li></ol></li><li class="post-toc-item post-toc-level-1"><a class="post-toc-link" href="#前端普适性规范"><span class="post-toc-number">2.</span> <span class="post-toc-text">前端普适性规范</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#黄金定律"><span class="post-toc-number">2.1.</span> <span class="post-toc-text">黄金定律</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#项目命名"><span class="post-toc-number">2.2.</span> <span class="post-toc-text">项目命名</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#文件命名"><span class="post-toc-number">2.3.</span> <span class="post-toc-text">文件命名</span></a></li></ol></li><li class="post-toc-item post-toc-level-1"><a class="post-toc-link" href="#HTML-规范"><span class="post-toc-number">3.</span> <span class="post-toc-text">HTML 规范</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#语法"><span class="post-toc-number">3.1.</span> <span class="post-toc-text">语法</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#HTML5-doctype"><span class="post-toc-number">3.2.</span> <span class="post-toc-text">HTML5 doctype</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#语言属性"><span class="post-toc-number">3.3.</span> <span class="post-toc-text">语言属性</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#字符编码"><span class="post-toc-number">3.4.</span> <span class="post-toc-text">字符编码</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#IE-兼容模式"><span class="post-toc-number">3.5.</span> <span class="post-toc-text">IE 兼容模式</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#响应式"><span class="post-toc-number">3.6.</span> <span class="post-toc-text">响应式</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#引入-CSS-和-JavaScript"><span class="post-toc-number">3.7.</span> <span class="post-toc-text">引入 CSS 和 JavaScript</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#实用高于完美"><span class="post-toc-number">3.8.</span> <span class="post-toc-text">实用高于完美</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#减少标签数量"><span class="post-toc-number">3.9.</span> <span class="post-toc-text">减少标签数量</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#属性顺序"><span class="post-toc-number">3.10.</span> <span class="post-toc-text">属性顺序</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#Boolean-属性"><span class="post-toc-number">3.11.</span> <span class="post-toc-text">Boolean 属性</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#JavaScript-生成标签"><span class="post-toc-number">3.12.</span> <span class="post-toc-text">JavaScript 生成标签</span></a></li></ol></li><li class="post-toc-item post-toc-level-1"><a class="post-toc-link" href="#CSS-规范"><span class="post-toc-number">4.</span> <span class="post-toc-text">CSS 规范</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#语法-1"><span class="post-toc-number">4.1.</span> <span class="post-toc-text">语法</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#声明顺序"><span class="post-toc-number">4.2.</span> <span class="post-toc-text">声明顺序</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#Don’t-use-import"><span class="post-toc-number">4.3.</span> <span class="post-toc-text">Don’t use @import</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#媒体查询位置"><span class="post-toc-number">4.4.</span> <span class="post-toc-text">媒体查询位置</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#前缀属性"><span class="post-toc-number">4.5.</span> <span class="post-toc-text">前缀属性</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#单条声明的声明块"><span class="post-toc-number">4.6.</span> <span class="post-toc-text">单条声明的声明块</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#属性简写"><span class="post-toc-number">4.7.</span> <span class="post-toc-text">属性简写</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#Less-和-Sass-中的嵌套"><span class="post-toc-number">4.8.</span> <span class="post-toc-text">Less 和 Sass 中的嵌套</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#代码注释"><span class="post-toc-number">4.9.</span> <span class="post-toc-text">代码注释</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#class-命名"><span class="post-toc-number">4.10.</span> <span class="post-toc-text">class 命名</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#选择器"><span class="post-toc-number">4.11.</span> <span class="post-toc-text">选择器</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#代码组织"><span class="post-toc-number">4.12.</span> <span class="post-toc-text">代码组织</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#编辑器配置"><span class="post-toc-number">4.13.</span> <span class="post-toc-text">编辑器配置</span></a></li></ol></li><li class="post-toc-item post-toc-level-1"><a class="post-toc-link" href="#JS-规范"><span class="post-toc-number">5.</span> <span class="post-toc-text">JS 规范</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#语法-2"><span class="post-toc-number">5.1.</span> <span class="post-toc-text">语法</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#空行"><span class="post-toc-number">5.2.</span> <span class="post-toc-text">空行</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#变量命名"><span class="post-toc-number">5.3.</span> <span class="post-toc-text">变量命名</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#字符常量"><span class="post-toc-number">5.4.</span> <span class="post-toc-text">字符常量</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#null的使用场景"><span class="post-toc-number">5.5.</span> <span class="post-toc-text">null的使用场景</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#不适合null的使用场景"><span class="post-toc-number">5.6.</span> <span class="post-toc-text">不适合null的使用场景</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#undefined使用场景"><span class="post-toc-number">5.7.</span> <span class="post-toc-text">undefined使用场景</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#对象字面量"><span class="post-toc-number">5.8.</span> <span class="post-toc-text">对象字面量</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#数组声明"><span class="post-toc-number">5.9.</span> <span class="post-toc-text">数组声明</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#单行注释"><span class="post-toc-number">5.10.</span> <span class="post-toc-text">单行注释</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#多行注释格式"><span class="post-toc-number">5.11.</span> <span class="post-toc-text">多行注释格式</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#何时使用多行注释格式"><span class="post-toc-number">5.12.</span> <span class="post-toc-text">何时使用多行注释格式</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#文档注释"><span class="post-toc-number">5.13.</span> <span class="post-toc-text">文档注释</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#括号对齐"><span class="post-toc-number">5.14.</span> <span class="post-toc-text">括号对齐</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#if-else-前后留有空格"><span class="post-toc-number">5.15.</span> <span class="post-toc-text">if else 前后留有空格</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#switch"><span class="post-toc-number">5.16.</span> <span class="post-toc-text">switch</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#for"><span class="post-toc-number">5.17.</span> <span class="post-toc-text">for</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#变量声明"><span class="post-toc-number">5.18.</span> <span class="post-toc-text">变量声明</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#函数声明"><span class="post-toc-number">5.19.</span> <span class="post-toc-text">函数声明</span></a></li></ol></li></ol>
        </nav>
    </aside>
    
<article id="post-web-code-standards"
  class="post-article article-type-post fade" itemprop="blogPost">

    <div class="post-card">
        <h1 class="post-card-title">Web 前端代码规范</h1>
        <div class="post-meta">
            <time class="post-time" title="2017-06-25 16:23:05" datetime="2017-06-25T08:23:05.197Z"  itemprop="datePublished">2017-06-25</time>

            


            
<span id="busuanzi_container_page_pv" title="文章总阅读量" style='display:none'>
    <i class="icon icon-eye icon-pr"></i><span id="busuanzi_value_page_pv"></span>
</span>


            

        </div>
        <div class="post-content" id="post-content" itemprop="postContent">
            <h1 id="Web-前端代码规范"><a href="#Web-前端代码规范" class="headerlink" title="Web 前端代码规范"></a>Web 前端代码规范</h1><p>最后更新时间：2017-06-25</p>
<p>原始文章链接：<a href="https://github.com/bxm0927/web-code-standards" target="_blank" rel="external">https://github.com/bxm0927/web-code-standards</a></p>
<p>此项目用于记录规范的、高可维护性的前端代码，这是通过分析 Github 众多前端代码库，总结出来的前端代码书写规范。</p>
<a id="more"></a>
<h2 id="目录"><a href="#目录" class="headerlink" title="目录"></a>目录</h2><ol>
<li><a href="docs/common.md">前端普适性规范</a></li>
<li><a href="docs/html.md">HTML 规范</a></li>
<li><a href="docs/css.md">CSS 规范</a></li>
<li><a href="docs/js.md">JS 规范</a></li>
</ol>
<h2 id="License"><a href="#License" class="headerlink" title="License"></a>License</h2><p>public domain, Just take it.</p>
<h2 id="Thanks"><a href="#Thanks" class="headerlink" title="Thanks"></a>Thanks</h2><p>@Ruan YiFeng: <a href="https://github.com/ruanyf" target="_blank" rel="external">https://github.com/ruanyf</a></p>
<p>@materliu：<a href="https://materliu.github.io/code-guide" target="_blank" rel="external">https://materliu.github.io/code-guide</a></p>
<p>@hzlzh: <a href="https://github.com/hzlzh/Front-End-Standards" target="_blank" rel="external">https://github.com/hzlzh/Front-End-Standards</a></p>
<p>@tguide: <a href="http://tguide.qq.com/main/base.htm" target="_blank" rel="external">http://tguide.qq.com/main/base.htm</a></p>
<h1 id="前端普适性规范"><a href="#前端普适性规范" class="headerlink" title="前端普适性规范"></a>前端普适性规范</h1><h2 id="黄金定律"><a href="#黄金定律" class="headerlink" title="黄金定律"></a>黄金定律</h2><p>永远遵循同一套编码规范，可以是这里列出的，也可以是你自己总结的。如果你发现本<br>规范中有任何错误，敬请指正。</p>
<p>不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。</p>
<h2 id="项目命名"><a href="#项目命名" class="headerlink" title="项目命名"></a>项目命名</h2><p>项目名全部采用小写方式，以中划线分隔，禁止驼峰式命名。比如：my-project-name</p>
<h2 id="文件命名"><a href="#文件命名" class="headerlink" title="文件命名"></a>文件命名</h2><p>文件命名参照上一条规则，多个单词组成时，采用中划线连接方式，比如说: error-report.html</p>
<p>有复数结构时，要采用复数命名法，比如说： scripts, styles, images, data-models</p>
<p>文件名中只可由小写英文字母a~z、排序数字0~9或间隔符-组成，禁止包含特殊符号，比如空格、$等</p>
<p>为更好的表达语义，文件名使用英文名词命名，或英文简写。</p>
<p>不允许命名带有广告等英文的单词，例如ad,adv,adver,advertising，防止该模块被浏览器当成垃圾广告过滤掉。任何文件的命名均如此。</p>
<ul>
<li>index.shtml 引导页&amp;首页</li>
<li>main.shtml 首页</li>
<li>download.shtml 下载页面</li>
<li>act.html 活动列表页面</li>
<li>video.html 视频</li>
<li><p>cdkey.html CDKEY页面</p>
</li>
<li><p>base.css 基本样式</p>
</li>
<li>layout.css 框架布局</li>
<li>module.css 模块样式</li>
<li>global.css 全局样式</li>
<li>font.css 字体样式</li>
<li>index.css 首页样式</li>
<li>link.css  链接样式</li>
<li>print.css 打印样式</li>
</ul>
<h1 id="HTML-规范"><a href="#HTML-规范" class="headerlink" title="HTML 规范"></a>HTML 规范</h1><h2 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h2><p>使用四个空格的缩进，这是保证代码在各种环境下显示一致的唯一方式。</p>
<p>嵌套的节点应该缩进（四个空格）。</p>
<p>在属性上，使用双引号，不要使用单引号。</p>
<p>不要在自动闭合标签结尾处使用斜线 - HTML5 规范 指出他们是可选的。</p>
<p>不要忽略可选的关闭标签（例如， 和 ）。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">&lt;img src=&quot;images/logo.png&quot; alt=&quot;Company&quot;&gt;</div></pre></td></tr></table></figure>
<h2 id="HTML5-doctype"><a href="#HTML5-doctype" class="headerlink" title="HTML5 doctype"></a>HTML5 doctype</h2><p>在每个 HTML 页面开头使用这个简单地 doctype 来启用标准模式，使其每个浏览器中尽可能一致的展现。</p>
<p>虽然doctype不区分大小写，但是按照惯例，doctype大写</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">&lt;!DOCTYPE html&gt;</div></pre></td></tr></table></figure>
<h2 id="语言属性"><a href="#语言属性" class="headerlink" title="语言属性"></a>语言属性</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">&lt;html lang=&quot;en&quot;&gt;</div><div class="line"></div><div class="line">&lt;/html&gt;</div></pre></td></tr></table></figure>
<h2 id="字符编码"><a href="#字符编码" class="headerlink" title="字符编码"></a>字符编码</h2><p>通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式。这样<br>做的好处是，可以避免在 HTML 中使用字符实体标记（character entity），从而全部与<br>文档编码一致（一般采用 UTF-8 编码）。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">&lt;meta charset=&quot;UTF-8&quot;&gt;</div></pre></td></tr></table></figure>
<h2 id="IE-兼容模式"><a href="#IE-兼容模式" class="headerlink" title="IE 兼容模式"></a>IE 兼容模式</h2><p>IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈<br>的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模<br>式。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=Edge&quot;&gt;</div></pre></td></tr></table></figure>
<h2 id="响应式"><a href="#响应式" class="headerlink" title="响应式"></a>响应式</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;</div></pre></td></tr></table></figure>
<h2 id="引入-CSS-和-JavaScript"><a href="#引入-CSS-和-JavaScript" class="headerlink" title="引入 CSS 和 JavaScript"></a>引入 CSS 和 JavaScript</h2><p>根据 HTML5 规范, 通常在引入 CSS 和 JavaScript 时不需要指明 type，因为 text/css 和 text/javascript 分别是他们的默认值。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">&lt;!-- External CSS --&gt;</div><div class="line">&lt;link rel=&quot;stylesheet&quot; href=&quot;code-guide.css&quot;&gt;</div><div class="line"></div><div class="line">&lt;!-- In-document CSS --&gt;</div><div class="line">&lt;style&gt;</div><div class="line">    /* ... */</div><div class="line">&lt;/style&gt;</div><div class="line"></div><div class="line">&lt;!-- JavaScript --&gt;</div><div class="line">&lt;script src=&quot;code-guide.js&quot;&gt;&lt;/script&gt;</div></pre></td></tr></table></figure>
<h2 id="实用高于完美"><a href="#实用高于完美" class="headerlink" title="实用高于完美"></a>实用高于完美</h2><p>尽量遵循 HTML 标准和语义，但是不应该以浪费实用性作为代价。任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。</p>
<h2 id="减少标签数量"><a href="#减少标签数量" class="headerlink" title="减少标签数量"></a>减少标签数量</h2><p>在编写 HTML 代码时，需要尽量避免多余的父节点。很多时候，需要通过迭代和重构来使 HTML 变得更少。 参考下面的示例:</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">&lt;!-- Not so great --&gt;</div><div class="line">&lt;span class=&quot;avatar&quot;&gt;</div><div class="line">    &lt;img src=&quot;...&quot;&gt;</div><div class="line">&lt;/span&gt;</div><div class="line"></div><div class="line">&lt;!-- Better --&gt;</div><div class="line">&lt;img class=&quot;avatar&quot; src=&quot;...&quot;&gt;</div></pre></td></tr></table></figure>
<h2 id="属性顺序"><a href="#属性顺序" class="headerlink" title="属性顺序"></a>属性顺序</h2><p>HTML 属性应该按照特定的顺序出现以保证易读性。</p>
<ol>
<li>class</li>
<li>id</li>
<li>name</li>
<li>data-*</li>
<li>src, for, type, href, value , max-length, max, min, pattern</li>
<li>placeholder, title, alt</li>
<li>aria-*, role</li>
<li>required, readonly, disabled</li>
</ol>
<p>class 是为高可复用组件设计的，理论上他们应处在第一位。id 更加具体而且应该尽量少使用（例如, 页内书签），所以他们处在第二位。</p>
<h2 id="Boolean-属性"><a href="#Boolean-属性" class="headerlink" title="Boolean 属性"></a>Boolean 属性</h2><p>Boolean 属性指不需要声明取值的属性。XHTML 需要每个属性声明取值，但是 HTML5 并不需要。</p>
<p>一个元素中 Boolean 属性的存在表示取值 true，不存在则表示取值 false。</p>
<p>简而言之，不要为 Boolean 属性添加取值。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">&lt;input type=&quot;text&quot; disabled&gt;</div></pre></td></tr></table></figure>
<h2 id="JavaScript-生成标签"><a href="#JavaScript-生成标签" class="headerlink" title="JavaScript 生成标签"></a>JavaScript 生成标签</h2><p>在 JavaScript 文件中生成标签让内容变得更难查找，更难编辑，性能更差。应该尽量避免这种情况的出现。</p>
<h1 id="CSS-规范"><a href="#CSS-规范" class="headerlink" title="CSS 规范"></a>CSS 规范</h1><h2 id="语法-1"><a href="#语法-1" class="headerlink" title="语法"></a>语法</h2><p>使用四个空格的缩进，这是保证代码在各种环境下显示一致的唯一方式。</p>
<p>使用组合选择器时，保持每个独立的选择器占用一行。</p>
<p>为了代码的易读性，在每个声明的左括号前增加一个空格。</p>
<p>声明块的右括号应该另起一行。</p>
<p>每条声明 : 后应该插入一个空格。</p>
<p>每条声明应该只占用一行来保证错误报告更加准确。</p>
<p>所有声明应该以分号结尾。虽然最后一条声明后的分号是可选的，但是如果没有他，你的代码会更容易出错。</p>
<p>逗号分隔的取值，都应该在逗号之后增加一个空格。</p>
<p>不要在颜色值 rgb() rgba() hsl() hsla()和 rect() 中增加空格，并且不要带有取值前面不必要的 0 (比如，使用 .5 替代 0.5)。</p>
<p>所有的十六进制值都应该使用小写字母，例如 #fff。因为小写字母有更多样的外形，在浏览文档时，他们能够更轻松的被区分开来。</p>
<p>尽可能使用短的十六进制数值，例如使用 #fff 替代 #ffffff。</p>
<p>为选择器中的属性取值添加引号，例如 input[type=”text”]。 他们只在某些情况下可有可无，所以都使用引号可以增加一致性。</p>
<p>不要为 0 指明单位，比如使用 margin: 0; 而不是 margin: 0px;。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div></pre></td><td class="code"><pre><div class="line">/* Bad CSS */</div><div class="line">.selector, .selector-secondary, .selector[type=text] &#123;</div><div class="line">    margin: 0px 0px 15px;</div><div class="line">    background-color: rgba(0, 0, 0, 0.5);</div><div class="line">    box-shadow: 0 1px 2px #CCC, inset 0 1px 0 #FFFFFF</div><div class="line">&#125;</div><div class="line"></div><div class="line">/* Good CSS */</div><div class="line">.selector,</div><div class="line">.selector-secondary,</div><div class="line">.selector[type=&quot;text&quot;] &#123;</div><div class="line">    margin-bottom: 15px;</div><div class="line">    background-color: rgba(0,0,0,.5);</div><div class="line">    box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h2 id="声明顺序"><a href="#声明顺序" class="headerlink" title="声明顺序"></a>声明顺序</h2><p>相关的属性声明应该以下面的顺序分组处理：</p>
<ol>
<li>Positioning</li>
<li>Box model 盒模型</li>
<li>Typographic 排版</li>
<li>Visual 外观</li>
</ol>
<p>Positioning 处在第一位，因为他可以使一个元素脱离正常文本流，并且覆盖盒模型相关的样式。盒模型紧跟其后，因为他决定了一个组件的大小和位置。</p>
<p>其他属性只在组件内部起作用或者不会对前面两种情况的结果产生影响，所以他们排在后面。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div></pre></td><td class="code"><pre><div class="line">.declaration-order &#123;</div><div class="line">    /* Positioning */</div><div class="line">    position: absolute;</div><div class="line">    top: 0;</div><div class="line">    right: 0;</div><div class="line">    bottom: 0;</div><div class="line">    left: 0;</div><div class="line">    z-index: 100;</div><div class="line"></div><div class="line">    /* Box-model */</div><div class="line">    display: block;</div><div class="line">    float: right;</div><div class="line">    width: 100px;</div><div class="line">    height: 100px;</div><div class="line"></div><div class="line">    /* Typography */</div><div class="line">    font: normal 13px &quot;Helvetica Neue&quot;, sans-serif;</div><div class="line">    line-height: 1.5;</div><div class="line">    color: #333;</div><div class="line">    text-align: center;</div><div class="line"></div><div class="line">    /* Visual */</div><div class="line">    background-color: #f5f5f5;</div><div class="line">    border: 1px solid #e5e5e5;</div><div class="line">    border-radius: 3px;</div><div class="line"></div><div class="line">    /* Misc */</div><div class="line">    opacity: 1;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h2 id="Don’t-use-import"><a href="#Don’t-use-import" class="headerlink" title="Don’t use @import"></a>Don’t use @import</h2><p>与<code>&lt;link&gt;</code>相比，<code>@import</code>较慢，增加额外的页面请求，并可能导致其他不可预见的问题。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">&lt;!-- Use link elements --&gt;</div><div class="line">&lt;link rel=&quot;stylesheet&quot; href=&quot;core.css&quot;&gt;</div><div class="line"></div><div class="line">&lt;!-- Avoid @imports --&gt;</div><div class="line">&lt;style&gt;</div><div class="line">    @import url(&quot;more.css&quot;);</div><div class="line">&lt;/style&gt;</div></pre></td></tr></table></figure>
<h2 id="媒体查询位置"><a href="#媒体查询位置" class="headerlink" title="媒体查询位置"></a>媒体查询位置</h2><p>尽量将媒体查询的位置靠近他们相关的规则。不要将他们一起放到一个独立的样式文件中，或者丢在文档的最底部。这样做只会让大家以后更容易忘记他们。这里是一个典型的案例。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line">.element &#123; ... &#125;</div><div class="line">.element-avatar &#123; ... &#125;</div><div class="line">.element-selected &#123; ... &#125;</div><div class="line"></div><div class="line">@media (min-width: 480px) &#123;</div><div class="line">    .element &#123; ...&#125;</div><div class="line">    .element-avatar &#123; ... &#125;</div><div class="line">    .element-selected &#123; ... &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h2 id="前缀属性"><a href="#前缀属性" class="headerlink" title="前缀属性"></a>前缀属性</h2><p>当使用厂商前缀属性时，通过缩进使取值垂直对齐以便多行编辑。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">/* Prefixed properties */</div><div class="line">.selector &#123;</div><div class="line">    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);</div><div class="line">            box-shadow: 0 1px 2px rgba(0,0,0,.15);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h2 id="单条声明的声明块"><a href="#单条声明的声明块" class="headerlink" title="单条声明的声明块"></a>单条声明的声明块</h2><p>在一个声明块中只包含一条声明的情况下，为了易读性和快速编辑可以考虑移除其中的换行。所有包含多条声明的声明块应该分为多行。</p>
<p>这样做的关键因素是错误检测 - 例如，一个 CSS 验证程序显示你在 183 行有一个语法错误,如果是一个单条声明的行，那就是他了。在多个声明的情况下，你必须为哪里出错了费下脑子。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">.span1 &#123; width: 60px; &#125;</div><div class="line">.span2 &#123; width: 140px; &#125;</div><div class="line">.span3 &#123; width: 220px; &#125;</div></pre></td></tr></table></figure>
<h2 id="属性简写"><a href="#属性简写" class="headerlink" title="属性简写"></a>属性简写</h2><p>尽量不使用属性简写的方式，属性简写需要你必须显式设置所有取值。常见的属性简写滥用包括:</p>
<ul>
<li>padding</li>
<li>margin</li>
<li>font</li>
<li>background<br>-border<br>-border-radius</li>
</ul>
<p>大多数情况下，我们并不需要设置属性简写中包含的所有值。例如，HTML 头部只设置上下的 margin，所以如果需要，只设置这两个值。过度使用属性简写往往会导致更混乱的代码，其中包含不必要的重写和意想不到的副作用。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line">/* Bad example */</div><div class="line">.element &#123;</div><div class="line">    margin: 0 0 10px;</div><div class="line">    background: red;</div><div class="line">    background: url(&quot;image.jpg&quot;);</div><div class="line">    border-radius: 3px 3px 0 0;</div><div class="line">&#125;</div><div class="line"></div><div class="line">/* Good example */</div><div class="line">.element &#123;</div><div class="line">    margin-bottom: 10px;</div><div class="line">    background-color: red;</div><div class="line">    background-image: url(&quot;image.jpg&quot;);</div><div class="line">    border-top-left-radius: 3px;</div><div class="line">    border-top-right-radius: 3px;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h2 id="Less-和-Sass-中的嵌套"><a href="#Less-和-Sass-中的嵌套" class="headerlink" title="Less 和 Sass 中的嵌套"></a>Less 和 Sass 中的嵌套</h2><p>避免不必要的嵌套。可以进行嵌套，不意味着你应该这样做。只有在需要给父元素增加样式并且同时存在多个子元素时才需要考虑嵌套。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line">// Without nesting</div><div class="line">.table &gt; thead &gt; tr &gt; th &#123; … &#125;</div><div class="line">.table &gt; thead &gt; tr &gt; td &#123; … &#125;</div><div class="line"></div><div class="line">// With nesting</div><div class="line">.table &gt; thead &gt; tr &#123;</div><div class="line">    &gt; th &#123; … &#125;</div><div class="line">    &gt; td &#123; … &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h2 id="代码注释"><a href="#代码注释" class="headerlink" title="代码注释"></a>代码注释</h2><p>代码是由人来编写和维护的。保证你的代码是描述性的，包含好的注释，并且容易被他人理解。好的代码注释传达上下文和目标。不要简单地重申组件或者 class 名称。</p>
<h2 id="class-命名"><a href="#class-命名" class="headerlink" title="class 命名"></a>class 命名</h2><p>保持 class 命名为全小写，可以使用短划线（不要使用下划线和 camelCase 命名）。短划线应该作为相关类的自然间断。(例如，.btn 和 .btn-danger)。</p>
<p>避免过度使用简写。.btn 可以很好地描述 button，但是 .s 不能代表任何元素。</p>
<p>class 的命名应该尽量短，也要尽量明确。</p>
<p>使用有意义的名称；使用结构化或者作用目标相关，而不是抽象的名称。</p>
<p>命名时使用最近的父节点或者父 class 作为前缀。</p>
<p>使用 .js-* 来表示行为(相对于样式)，但是不要在 CSS 中包含这些 class。</p>
<h2 id="选择器"><a href="#选择器" class="headerlink" title="选择器"></a>选择器</h2><p>使用 class 而不是通用元素标签来优化渲染性能。</p>
<p>避免在经常出现的组件中使用一些属性选择器 (例如，[class^=”…”])。浏览器性能会受到这些情况的影响。</p>
<p>减少选择器的长度，每个组合选择器选择器的条目应该尽量控制在 3 个以内。</p>
<p>只在必要的情况下使用后代选择器 (例如，没有使用带前缀 classes 的情况).</p>
<h2 id="代码组织"><a href="#代码组织" class="headerlink" title="代码组织"></a>代码组织</h2><p>以组件为单位组织代码。</p>
<p>制定一个一致的注释层级结构。</p>
<p>使用一致的空白来分割代码块，这样做在查看大的文档时更有优势。</p>
<p>当使用多个 CSS 文件时，通过组件而不是页面来区分他们。页面会被重新排列，而组件移动就可以了。</p>
<h2 id="编辑器配置"><a href="#编辑器配置" class="headerlink" title="编辑器配置"></a>编辑器配置</h2><p>根据以下的设置来配置你的编辑器，将这些设置应用到项目的 .editorconfig 文件，来避免常见的代码不一致和丑陋的 diffs。</p>
<ul>
<li>使用四个空格的缩进。</li>
<li>在保存时删除尾部的空白字符。</li>
<li>设置文件编码为 UTF-8。</li>
<li>在文件结尾添加一个空白行。</li>
</ul>
<h1 id="JS-规范"><a href="#JS-规范" class="headerlink" title="JS 规范"></a>JS 规范</h1><h2 id="语法-2"><a href="#语法-2" class="headerlink" title="语法"></a>语法</h2><p>使用四个空格的缩进，这是保证代码在各种环境下显示一致的唯一方式。</p>
<p>声明之后一律以分号结束， 不可以省略</p>
<p>完全避免 == != 的使用， 用严格比较条件 === !==</p>
<p>eval 非特殊情况， 禁用！！！</p>
<p>with 非特殊情况， 禁用！！！</p>
<p>单行长度，理论上不要超过80列，不过如果编辑器开启”自动换行”的话可以不考虑单行长度</p>
<p>接上一条，如果需要换行，存在操作符的情况，一定在操作符后换行，然后换的行缩进4个空格</p>
<p>这里要注意，如果是多次换行的话就没有必要继续缩进了，比如说下面这种就是最佳格式。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">if (typeof qqfind === &quot;undefined&quot; ||</div><div class="line">    typeof qqfind.cdnrejected === &quot;undefined&quot; ||</div><div class="line">    qqfind.cdnrejected !== true) &#123;</div><div class="line">    url = &quot;http://pub.idqqimg.com/qqfind/js/location4.js&quot;;</div><div class="line">&#125; else &#123;</div><div class="line">    url = &quot;http://find.qq.com/js/location4.js&quot;;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h2 id="空行"><a href="#空行" class="headerlink" title="空行"></a>空行</h2><p>方法之间加</p>
<p>单行或多行注释前加</p>
<p>逻辑块之间加空行增加可读性</p>
<h2 id="变量命名"><a href="#变量命名" class="headerlink" title="变量命名"></a>变量命名</h2><p>标准变量采用驼峰标识</p>
<p>使用的ID的地方一定全大写</p>
<p>使用的URL的地方一定全大写, 比如说 reportURL</p>
<p>涉及Android的，一律大写第一个字母</p>
<p>涉及iOS的，一律小写第一个，大写后两个字母</p>
<p>常量采用大写字母，下划线连接的方式</p>
<p>构造函数，大写第一个字母</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line">var thisIsMyName;</div><div class="line"></div><div class="line">var goodID;</div><div class="line"></div><div class="line">var AndroidVersion;</div><div class="line"></div><div class="line">var iOSVersion;</div><div class="line"></div><div class="line">var MAX_COUNT = 10;</div><div class="line"></div><div class="line">function Person(name) &#123;</div><div class="line">    this.name = name</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h2 id="字符常量"><a href="#字符常量" class="headerlink" title="字符常量"></a>字符常量</h2><p>一般情况下统一使用单引号</p>
<h2 id="null的使用场景"><a href="#null的使用场景" class="headerlink" title="null的使用场景"></a>null的使用场景</h2><p>初始化可能以后分配对象值的变量</p>
<p>与一个可能或可能没有对象值的初始化变量进行比较</p>
<p>传入一个预期对象的函数</p>
<p>从预期对象的函数返回</p>
<h2 id="不适合null的使用场景"><a href="#不适合null的使用场景" class="headerlink" title="不适合null的使用场景"></a>不适合null的使用场景</h2><p>不要使用null来测试是否提供参数</p>
<p>不要测试值为null的未初始化变量</p>
<h2 id="undefined使用场景"><a href="#undefined使用场景" class="headerlink" title="undefined使用场景"></a>undefined使用场景</h2><p>永远不要直接使用undefined进行变量判断</p>
<p>使用字符串 “undefined” 对变量进行判断</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">// Bad</div><div class="line">var person;</div><div class="line">console.log(person === undefined);    //true</div><div class="line"></div><div class="line">// Good</div><div class="line">console.log(typeof person);    // &quot;undefined&quot;</div></pre></td></tr></table></figure>
<h2 id="对象字面量"><a href="#对象字面量" class="headerlink" title="对象字面量"></a>对象字面量</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">// Bad</div><div class="line">var team = new Team();</div><div class="line">team.title = &quot;AlloyTeam&quot;;</div><div class="line">team.count = 25;</div><div class="line"></div><div class="line">// Good</div><div class="line">var team = &#123;</div><div class="line">    title: &quot;AlloyTeam&quot;,</div><div class="line">    count: 25</div><div class="line">&#125;;</div></pre></td></tr></table></figure>
<h2 id="数组声明"><a href="#数组声明" class="headerlink" title="数组声明"></a>数组声明</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">// Bad</div><div class="line">var colors = new Array(&quot;red&quot;, &quot;green&quot;, &quot;blue&quot;);</div><div class="line">var numbers = new Array(1, 2, 3, 4);</div><div class="line"></div><div class="line"></div><div class="line">// Good</div><div class="line">var colors = [ &quot;red&quot;, &quot;green&quot;, &quot;blue&quot; ];</div><div class="line">var numbers = [ 1, 2, 3, 4 ];</div></pre></td></tr></table></figure>
<h2 id="单行注释"><a href="#单行注释" class="headerlink" title="单行注释"></a>单行注释</h2><p>双斜线后，必须跟注释内容保留一个空格</p>
<p>与下一行代码缩进保持一致</p>
<p>可位于一个代码行的末尾，双斜线距离分号四个空格</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">// Good</div><div class="line">if (condition) &#123;</div><div class="line">    // if you made it here, then all security checks passed</div><div class="line">    allowed();</div><div class="line">&#125;</div><div class="line"></div><div class="line">var zhangsan = &quot;zhangsan&quot;;    // 双斜线距离分号四个空格，双斜线后始终保留一个空格</div></pre></td></tr></table></figure>
<h2 id="多行注释格式"><a href="#多行注释格式" class="headerlink" title="多行注释格式"></a>多行注释格式</h2><p>最少三行</p>
<p>前边留空一行</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">/**</div><div class="line"> * 注释内容与星标前保留一个空格</div><div class="line"> */</div></pre></td></tr></table></figure>
<h2 id="何时使用多行注释格式"><a href="#何时使用多行注释格式" class="headerlink" title="何时使用多行注释格式"></a>何时使用多行注释格式</h2><p>难于理解的代码段</p>
<p>可能存在错误的代码段</p>
<p>浏览器特殊的HACK代码</p>
<p>业务逻辑强相关的代码</p>
<p>想吐槽的产品逻辑, 合作同事</p>
<h2 id="文档注释"><a href="#文档注释" class="headerlink" title="文档注释"></a>文档注释</h2><p>各类标签 @param @method 等 参考 <a href="http://usejsdoc.org/" target="_blank" rel="external">http://usejsdoc.org/</a></p>
<p>用于：方法、构造函数、对象</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">/**</div><div class="line"> * here boy, look here , here is girl</div><div class="line"> * @method lookGril</div><div class="line"> * @param &#123;Object&#125; balabalabala</div><div class="line"> * @return &#123;Object&#125; balabalabala</div><div class="line"> */</div></pre></td></tr></table></figure>
<h2 id="括号对齐"><a href="#括号对齐" class="headerlink" title="括号对齐"></a>括号对齐</h2><p>标准示例 括号前后有空格，花括号起始不另换行，结尾新起一行</p>
<p>花括号必须要，即使内容只有一行</p>
<p>涉及 if for while do…while try…catch…finally 的地方都必须使用花括号，即使内容只有一行</p>
<h2 id="if-else-前后留有空格"><a href="#if-else-前后留有空格" class="headerlink" title="if else 前后留有空格"></a>if else 前后留有空格</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">if (condition) &#123;</div><div class="line">    doSomething();</div><div class="line">&#125; else &#123;</div><div class="line">    doSomethingElse();</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h2 id="switch"><a href="#switch" class="headerlink" title="switch"></a>switch</h2><p>switch和括号之间有空格，case需要缩进，break之后跟下一个case中间留一个空白行</p>
<p>花括号必须要， 即使内容只有一行。</p>
<p>switch 的 falling through 一定要有注释特别说明，no default 的情况也需要注释特别说明况</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line">switch (condition) &#123;</div><div class="line">    case &quot;first&quot;:</div><div class="line">        // code</div><div class="line">        break;</div><div class="line"></div><div class="line">    case &quot;second&quot;:</div><div class="line">        // code</div><div class="line">        break;</div><div class="line"></div><div class="line">    default:</div><div class="line">    // code</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h2 id="for"><a href="#for" class="headerlink" title="for"></a>for</h2><p>普通for循环, 分号后留有一个空格， 判断条件等内的操作符两边不留空格</p>
<p>前置条件如果有多个，逗号后留一个空格</p>
<p>for-in 一定要有 hasOwnProperty 的判断， 否则 JSLint 或者 JSHint 都会有一个 warn</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line">for (i=0, len=values.length; i&lt;len; i++) &#123;</div><div class="line">    process(values[i]);</div><div class="line">&#125;</div><div class="line"></div><div class="line"></div><div class="line">var prop;</div><div class="line"></div><div class="line">for (prop in object) &#123;</div><div class="line">    // 注意这里一定要有 hasOwnProperty 的判断， 否则 JSLint 或者 JSHint 都会有一个 warn ！</div><div class="line">    if (object.hasOwnProperty(prop)) &#123;</div><div class="line">        console.log(&quot;Property name is &quot; + prop);</div><div class="line">        console.log(&quot;Property value is &quot; + object[prop]);</div><div class="line">    &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h2 id="变量声明"><a href="#变量声明" class="headerlink" title="变量声明"></a>变量声明</h2><p>所有函数内变量声明放在函数内头部，只使用一个 var(多了JSLint报错)， 一个变量一行， 在行末跟注释， 注释啊，注释啊，亲</p>
<h2 id="函数声明"><a href="#函数声明" class="headerlink" title="函数声明"></a>函数声明</h2><p>一定先声明再使用， 不要利用 JavaScript engine的变量提升特性, 违反了这个规则 JSLint 和 JSHint都会报 warn</p>
<p>function declaration 和 function expression 的不同，function expression 的（）前后必须有空格，而function declaration 在有函数名的时候不需要空格，没有函数名的时候需要空格。</p>
<p>函数调用括号前后不需要空格</p>
<p>立即执行函数的写法, 最外层必须包一层括号</p>
<p>“use strict” 决不允许全局使用， 必须放在函数的第一行， 可以用自执行函数包含大的代码段, 如果 “use strict” 在函数外使用， JSLint 和 JSHint 均会报错</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div></pre></td><td class="code"><pre><div class="line">function doSomething(item) &#123;</div><div class="line">    // do something</div><div class="line">&#125;</div><div class="line"></div><div class="line">var doSomething = function (item) &#123;</div><div class="line">    // do something</div><div class="line">&#125;</div><div class="line"></div><div class="line"></div><div class="line">// Good</div><div class="line">doSomething(item);</div><div class="line"></div><div class="line">// Bad: Looks like a block statement</div><div class="line">doSomething (item);</div><div class="line"></div><div class="line">// Good</div><div class="line">(function() &#123;</div><div class="line">    &quot;use strict&quot;;</div><div class="line"></div><div class="line">    function doSomething() &#123;</div><div class="line">        // code</div><div class="line">    &#125;</div><div class="line">&#125;)();</div></pre></td></tr></table></figure>

        </div>

        <blockquote class="post-copyright">
    <div class="content">
        
<span class="post-time">
    最后更新时间：<time datetime="2017-06-25T08:24:14.552Z" itemprop="dateUpdated">2017-06-25 16:24:14</time>
</span><br>


        
        原始文章链接：<a href="/2017/06/25/web-code-standards/" target="_blank" rel="external">http://www.lovebxm.com/2017/06/25/web-code-standards/</a>
        
    </div>
    <footer>
        <a href="http://www.lovebxm.com">
            <img src="/img/avatar.jpg" alt="白小明">
            白小明
        </a>
    </footer>
</blockquote>

        
<div class="page-reward">
    <a id="rewardBtn" href="javascript:;" class="page-reward-btn waves-effect waves-circle waves-light">赏</a>
</div>



        <div class="post-footer">
            
	<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/css/">css</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/html/">html</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/js/">js</a></li></ul>


            
<div class="page-share-wrap">
    

<div class="page-share" id="pageShare">
    <ul class="reset share-icons">
      <li>
        <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=http://www.lovebxm.com/2017/06/25/web-code-standards/&title=《Web 前端代码规范》 — Xiaoming's Blog&pic=http://www.lovebxm.com/img/avatar.jpg" data-title="微博">
          <i class="icon icon-weibo"></i>
        </a>
      </li>
      <li>
        <a class="weixin share-sns wxFab" href="javascript:;" data-title="微信">
          <i class="icon icon-weixin"></i>
        </a>
      </li>
      <li>
        <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=http://www.lovebxm.com/2017/06/25/web-code-standards/&title=《Web 前端代码规范》 — Xiaoming's Blog&source=Web 前端代码规范最后更新时间：2017-06-25
原始文章链接：https://github.com/bxm0927/web-code-standa..." data-title=" QQ">
          <i class="icon icon-qq"></i>
        </a>
      </li>
      <li>
        <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://www.lovebxm.com/2017/06/25/web-code-standards/" data-title=" Facebook">
          <i class="icon icon-facebook"></i>
        </a>
      </li>
      <li>
        <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=《Web 前端代码规范》 — Xiaoming's Blog&url=http://www.lovebxm.com/2017/06/25/web-code-standards/&via=http://www.lovebxm.com" data-title=" Twitter">
          <i class="icon icon-twitter"></i>
        </a>
      </li>
      <li>
        <a class="google share-sns" target="_blank" href="https://plus.google.com/share?url=http://www.lovebxm.com/2017/06/25/web-code-standards/" data-title=" Google+">
          <i class="icon icon-google-plus"></i>
        </a>
      </li>
    </ul>
 </div>



    <a href="javascript:;" id="shareFab" class="page-share-fab waves-effect waves-circle">
        <i class="icon icon-share-alt icon-lg"></i>
    </a>
</div>



        </div>
    </div>

    
<nav class="post-nav flex-row flex-justify-between flex-row-reverse">
  

  
    <div class="waves-block waves-effect next">
      <a href="/2017/06/24/es6_study/" id="post-next" class="post-nav-link">
        <div class="tips">Next <i class="icon icon-angle-right icon-lg icon-pl"></i></div>
        <h4 class="title">学习 ES6，一篇文章就够了</h4>
      </a>
    </div>
  
</nav>



    










    <div id="cloud-tie-wrapper" class="comments cloud-tie-wrapper"></div>
    <script>
    var cloudTieConfig = {
        url: 'http://www.lovebxm.com/2017/06/25/web-code-standards/index.html',
        sourceId: 'web-code-standards',
        productKey: '294c776acae94037bdd6605780e549e4',
        target: 'cloud-tie-wrapper',
        pcFiles: [
            '//unpkg.com/hexo-theme-material-indigo@latest/css/cloudTie/pc.css',
            '//unpkg.com/hexo-theme-material-indigo@latest/js/cloudTie/pc.min.js',
        ],
        mobileFiles: [
            '//unpkg.com/hexo-theme-material-indigo@latest/css/cloudTie/mobile.css',
            '//unpkg.com/hexo-theme-material-indigo@latest/js/cloudTie/mobile.min.js'
        ]
    };
    </script>
    <script src="//unpkg.com/hexo-theme-material-indigo@latest/js/cloudTie/loader.min.js"></script>







</article>

<div id="reward" class="page-modal reward-lay">
    <a class="close" href="javascript:;"><i class="icon icon-close"></i></a>
    <h3 class="reward-title">
        <i class="icon icon-quote-left"></i>
        谢谢您~
        <i class="icon icon-quote-right"></i>
    </h3>
    <ul class="reward-items">
        
        <li>
            <img src="/img/wechat.jpg" title="微信打赏二维码" alt="微信打赏二维码">
            <p>微信</p>
        </li>
        

        
        <li>
            <img src="/img/alipay.jpg" title="支付宝打赏二维码" alt="支付宝打赏二维码">
            <p>支付宝</p>
        </li>
        
    </ul>
</div>



</div>

        <!-- <footer class="footer">
    <div class="top">
        
<p>
    <span id="busuanzi_container_site_uv" style='display:none'>
        总访客数：<span id="busuanzi_value_site_uv"></span>
    </span>
    <span id="busuanzi_container_site_pv" style='display:none'>
        总访问量：<span id="busuanzi_value_site_pv"></span>
    </span>
</p>


        <p>
            
                <span><a href="/atom.xml" target="_blank" class="rss" title="rss"><i class="icon icon-lg icon-rss"></i></a></span>
            
            <span>博客内容遵循<a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">知识共享 署名 - 非商业性 - 相同方式共享 4.0 国际协议</a></span>
        </p>
    </div>
    <div class="bottom">
        <p>
            <span>Power by <a href="http://hexo.io/" target="_blank">Hexo</a> Theme <a href="https://github.com/yscoder/hexo-theme-indigo" target="_blank">indigo</a></span>
            <span>白小明 &copy; 2017</span>
        </p>
    </div>
</footer> -->

<footer class="footer">
    <div class="top">
        
<p>
    <span id="busuanzi_container_site_uv" style='display:none'>
        总访客数：<span id="busuanzi_value_site_uv"></span>
    </span>
    <span id="busuanzi_container_site_pv" style='display:none'>
        总访问量：<span id="busuanzi_value_site_pv"></span>
    </span>
</p>


        <p>
            
                <span><a href="/atom.xml" target="_blank" class="rss" title="rss"><i class="icon icon-lg icon-rss"></i></a></span>
            
            <span>博客内容遵循<a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">知识共享 署名 - 非商业性 - 相同方式共享 4.0 国际协议</a></span>
            <span>白小明 &copy; 2017</span>
        </p>
    </div>
    <div class="bottom">
        <p>
        <span>
        <a target="_blank" href="mailto:80583600@qq.com" style="border-bottom:none">
        <img src="" alt="E-mail 联系" style="width:20px;height:20px;border:none;">
        </a>
        </span>

        <span>
        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=80583600&site=qq&menu=yes" style="border-bottom:none">
        <img src="" title="QQ 联系" style="width:22px;height:22px;border:none;"></a>
        </span>

        <span>
        <a target="_blank" href="https://github.com/bxm0927" style="border-bottom:none">
        <img src="" alt="GitHub microzz" title="GitHub 联系" style="width:19px;height:19px;border:none;"></a>
        </span>
        </p>
    </div>
</footer>




    </main>
    <div class="mask" id="mask"></div>
<a href="javascript:;" id="gotop" class="waves-effect waves-circle waves-light"><span class="icon icon-lg icon-chevron-up"></span></a>



<div class="global-share" id="globalShare">
    <ul class="reset share-icons">
      <li>
        <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=http://www.lovebxm.com/2017/06/25/web-code-standards/&title=《Web 前端代码规范》 — Xiaoming's Blog&pic=http://www.lovebxm.com/img/avatar.jpg" data-title="微博">
          <i class="icon icon-weibo"></i>
        </a>
      </li>
      <li>
        <a class="weixin share-sns wxFab" href="javascript:;" data-title="微信">
          <i class="icon icon-weixin"></i>
        </a>
      </li>
      <li>
        <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=http://www.lovebxm.com/2017/06/25/web-code-standards/&title=《Web 前端代码规范》 — Xiaoming's Blog&source=Web 前端代码规范最后更新时间：2017-06-25
原始文章链接：https://github.com/bxm0927/web-code-standa..." data-title=" QQ">
          <i class="icon icon-qq"></i>
        </a>
      </li>
      <li>
        <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://www.lovebxm.com/2017/06/25/web-code-standards/" data-title=" Facebook">
          <i class="icon icon-facebook"></i>
        </a>
      </li>
      <li>
        <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=《Web 前端代码规范》 — Xiaoming's Blog&url=http://www.lovebxm.com/2017/06/25/web-code-standards/&via=http://www.lovebxm.com" data-title=" Twitter">
          <i class="icon icon-twitter"></i>
        </a>
      </li>
      <li>
        <a class="google share-sns" target="_blank" href="https://plus.google.com/share?url=http://www.lovebxm.com/2017/06/25/web-code-standards/" data-title=" Google+">
          <i class="icon icon-google-plus"></i>
        </a>
      </li>
    </ul>
 </div>


<div class="page-modal wx-share" id="wxShare">
    <a class="close" href="javascript:;"><i class="icon icon-close"></i></a>
    <p>扫一扫，分享到微信</p>
    <img src="" alt="微信分享二维码">
</div>




    <script src="//cdn.bootcss.com/node-waves/0.7.4/waves.min.js"></script>
<script>
var BLOG = { ROOT: '/', SHARE: true, REWARD: true };



</script>

<script src="//unpkg.com/hexo-theme-material-indigo@latest/js/main.min.js"></script>


<div class="search-panel" id="search-panel">
    <ul class="search-result" id="search-result"></ul>
</div>
<template id="search-tpl">
<li class="item">
    <a href="{path}" class="waves-block waves-effect">
        <div class="title ellipsis" title="{title}">{title}</div>
        <div class="flex-row flex-middle">
            <div class="tags ellipsis">
                {tags}
            </div>
            <time class="flex-col time">{date}</time>
        </div>
    </a>
</li>
</template>

<script src="//unpkg.com/hexo-theme-material-indigo@latest/js/search.min.js" async></script>






<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>



<script>
(function() {
    var OriginTitile = document.title, titleTime;
    document.addEventListener('visibilitychange', function() {
        if (document.hidden) {
            document.title = '死鬼去哪里了！';
            clearTimeout(titleTime);
        } else {
            document.title = '(つェ⊂)咦!又好了!';
            titleTime = setTimeout(function() {
                document.title = OriginTitile;
            },2000);
        }
    });
})();
</script>



</body>
</html>
